@charset "utf-8";
.index_header{
  width: 96%;
  margin: 0 auto;
  height: 4.4rem;
  background: #fff;
  margin-top: 1rem;
  display: flex;
  border-radius: .5rem;
  .hlist{
    flex: 1;
    text-align: center;
    padding-top: .2px;
    border-right: 1px solid #eee;

    img{
      width: 2rem;
      height: 2rem;
      margin: 0 auto;
    }
    &:last-child{

      border-right: none;
    }
  }
}
/*列表*/
.item{
  .item_cate{
    text-align: center;
    padding: .5rem;
  }
  .item_list{
    display: flex;
    flex-wrap: wrap;
    padding: 0px .5rem;
    li{
      width: 33.3%;
      padding: .5rem;
      box-sizing: border-box;

      .inner{
        background: #fff;
        width: 100%;
        border-radius: .5rem;
        overflow: hidden;
        img{
          width: 100%;
        }
        p{
          padding: .2rem .5rem;

        }
        .title{
          font-weight: bold;
        }
      }
    }
  }
}

/*侧边栏*/
.left_cate{
/*css3 运动 加过渡效果*/
  transition: all 1s;
  transform: translate(-100%,0);
  width: 6rem;
  height: 100%;
  position: fixed;
  background: #eee;
  z-index: 2;
  top:0px;
  left:0px;
  ul{
    position: absolute;
    height: 100%;
    padding: .5rem;
    z-index: 3;
    background: #eeee;
    li{
      line-height: 4.4rem;
    }
  }

  .nav_cate{
    position: absolute;
    right: -3.6rem;
    background: rgba(132,128,128,0.9);
    top:40%;
    width: 5rem;
    height: 4rem;
    text-align: center;
    border-radius: 0rem 50% 50% 0rem;
    img{
      width: 1.8rem;
      height: 1.8rem;
      margin-left: 1rem;
      margin-top: .5rem;

    }
    p{
      color: #fff;
      margin-left: .8rem;
      margin-top: -.5rem;
    }
  }
}

